<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: #f8f8f8;
			color: #222;
		}

		#sx-header{
			/*background: #fff !important;*/
		}

		.aui-btn img {
			width: 0.75rem;
		}

		.aui-title {
			/*color: #222;*/
		}

		.footer {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 100%;
			margin-bottom: 1rem;
		}
		.footer .tijiao{
			margin: 0 0.75rem;
			background: #FE2C55;
			color: #fff;
			border-radius: 0.15rem;
			padding: 0.5rem 0rem;
			font-size: 0.75rem;
			text-align: center;
		}
		.info{
			background: #fff;
			margin: 0.75rem 0;
			padding:0 0.75rem;
		}
		.info div{
			border-top: 1px solid #f3f3f3;
			padding: 0.25rem 0;
			font-size: 0.75rem;
		}
		.info div:first-child{
			border: 0;
		}
		.info div#diqu{

		}
		.info div#diqu:before{
			content:"\e6f5";
			position: absolute;
			right:0.75rem;
			top: 0.75rem;
			color: #999
		}
		.info div input{
			height: auto;
			line-height: inherit;
			padding: 0.5rem 0;
		}
		.text{
			background: #fff;
			margin-top: 0.75rem;
			padding: 0.75rem;
		}

		.tags,.moren{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-top: 1px solid #f3f3f3;
			padding-top: 0.75rem;
			margin-top: 0.75rem;
			font-size: 0.75rem;
		}
		.tags{
			border: 0;
			padding-top: 0;
			margin-top: 0;
		}
		.tags span{
			background: #f3f3f3;
			border-radius: 2rem;
			padding: 0.25rem 0.75rem;
			margin: 0 0.35rem;
			font-size: 0.65rem;
		}
		.tags span.a{
			background: #FE2C55;
			color: #fff;
		}
	</style>
</head>

<body>
	<header class="aui-bar aui-bar-nav" id="sx-header">
		<a class="aui-pull-left aui-btn" tapmode onclick="_close()"><img src="../i/x.png" /></a>
		<div class="aui-title">收货地址</div>
	</header>
	<div class="info">
		<div id="xingming"><input type="text" placeholder="收件人" value=""></div>
		<div id="mobile" ><input  type="tel" placeholder="手机号码" value=""></div>
		<div id="diqu" class="aui-iconfont" ><input value="" tapmode onclick="city()" readonly type="text" placeholder="地区选择"></div>
		<div id="dizhi" ><input type="text" value="" placeholder="详细地址：如接到、楼牌号等"></div>
	</div>
	<div class="text">
		<div class="tags">
			<div>地址标签</div>
			<div id="tags"><span tapmode onclick="tags(this)">家</span><span tapmode onclick="tags(this)">公司</span><span tapmode onclick="tags(this)">学校</span></div>
		</div>
		<div class="moren">
			<div>设置为默认地址</div>
			<div id="moren"><input type="checkbox" class="aui-switch"></div>
		</div>
	</div>
	<div class="footer">
		<div class="tijiao" tapmode onclick="data()">
			保存
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var tags_data = {'家':0,'公司':1,'学校':2};
	apiready = function() {
		header = $api.byId('sx-header');
		$api.fixStatusBar(header);
		api.parseTapmode();
		$api.fixTabBar($api.dom('.footer'))
		if(api.pageParam['id']){
			view();
		}
	}
	function view(){
		document.activeElement.blur();
		_loading();
		_ajax('shop/dizhi_view',function(ret,err){
			if(ret){
				$('#xingming input').val(ret.xingming);
				$('#mobile input').val(ret.mobile);
				$('#diqu input').val(ret.diqu);
				$('#dizhi input').val(ret.dizhi);
				if(ret.moren){
					$("#moren input[type='checkbox']").attr("checked","checked");
				}
				if(ret.tags){
					$("#tags span").eq(tags_data[ret.tags]).addClass('a')
				}
			}
			_loadingCloes();
		},{id:api.pageParam['id']})
	}
	function data(){
		var data = {};
		if(api.pageParam['id']){
			data.id = api.pageParam['id'];
		}
		data.xingming = $('#xingming input').val();
		if(!data.xingming){
			return _msg('请填写收件人');
		}
		data.mobile = $('#mobile input').val();
		if(!data.mobile){
			return _msg('请填写手机号码');
		}
		data.diqu = $('#diqu input').val();
		if(!data.diqu){
			return _msg('请选择地区');
		}
		data.dizhi = $('#dizhi input').val();
		if(!data.dizhi){
			return _msg('请填写地址');
		}
		data.moren = $("#moren input[type='checkbox']").is(":checked");
		data.moren = data.moren == true ? 1 : 0;
		data.tags = $("#tags span.a").text() ?  $("#tags span.a").text() : '';

		console.log(JSON.stringify(data));
		_loading();
		_ajax('shop/dizhi_add',function(ret,err){
			api.execScript({
			    name: 'shop_dizhi',
					frameName: 'shop_dizhi',
			    script: 'shuaxin();'
			});

			_loadingCloes();
			if(ret){
				if(ret.ret){
					_alert(ret.ret,function(ret,err){_close()})
				}else{
					_msg(ret.err)
				}
			}else{
			//	_alert(JSON.stringify(err))
			}
		},data)
	}
	function tags(_this) {
		document.activeElement.blur();
		$('.tags .a').removeClass('a');
		$(_this).addClass('a')
	}
	// 城市
	function city() {
		document.activeElement.blur();
		var UIActionSelector = api.require('UIActionSelector');
		UIActionSelector.open({
			datas:_j+'city.json',
			layout: {
				row: 5,
				col: 3,
				height: 30,
				size: 12,
				sizeActive: 14,
				rowSpacing: 5,
				colSpacing: 10,
				maskBg: 'rgba(0,0,0,0.2)',
				bg: '#fff',
				color: '#222',
				colorActive: '#222',
				colorSelected: '#222'
			},
			animation: true,
			cancel: {
				text: '取消',
				size: 12,
				w: 90,
				h: 35,
				bg: '#fff',
				bgActive: '#fff',
				color: '#222',
				colorActive: '#222'
			},
			ok: {
				text: '确定',
				size: 12,
				w: 90,
				h: 35,
				bg: '#fff',
				bgActive: '#fff',
				color: '#222',
				colorActive: '#222'
			},
			title: {
				text: '',
				size: 12,
				h: 44,
				bg: '#fff',
				color: '#222'
			},
			fixedOn: api.frameName
		}, function(ret, err) {
			if (ret) {
				if(ret.eventType == 'ok'){
					var province 	= 	ret.selectedInfo[0].name;
					var city 			= 	ret.selectedInfo[1].name;
					var area 			= 	ret.selectedInfo[2].name;
					$('#diqu input').val(province  + city +  area);
				}
			} else {
				console.log(JSON.stringify(err));
			}
		})
	}
</script>

</html>
